<template>
    <div class="dashboard-container">
      <h5>业务信息：</h5>
      <table class="detailtable">
          <tr>
              <td width="15%">企业名称:</td>
              <td width="35%">{{form.entName}}</td>
              <td width="15%">业务类型:</td>
              <td width="35%">{{form.type}}</td>
          </tr>
          <tr>
              <td width="15%">金额（元）:</td>
              <td width="35%">{{form.money}}</td>
              <td width="15%">委托合同号:</td>
              <td width="35%">{{form.contractNo}}</td>
          </tr>
          <tr>
              <td width="15%">区县:</td>
              <td width="35%">{{form.region}}</td>
              <td width="15%">银行:</td>
              <td width="35%">{{form.bankid_view}}</td>
          </tr>
      </table>
        <el-upload
            ref="upload"
            accept=".doc,.docx"
            class="upload-demo"
            :file-list="fileList"
            :on-success="onSuccess"
            :before-remove="handleRemove"
            :on-preview="handlePreview"
            :on-error="handeError"
            :with-credentials="true"
            :action="uploadUrl"
            multiple>
            <el-button v-if="!isReview" class="el-upload__btn" size="small" type="primary">点击上传合同</el-button>
            <div v-if="!isReview" class="el-upload__tip" slot="tip">只能上传doc/.docx文件</div>
        </el-upload>
        <el-button type="success" style="margin: 20px 0 0 45%;" @click="done">确定</el-button>
    </div>
  </template>
  
  <script>
  import { businessOptions,parseTime } from '@/utils/index'
  import { mapGetters } from 'vuex'
  import { getBusinessById,fileDelete,getBanks } from '@/api/user'
  
  export default {
    name: 'Dashboard',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data() {
      return {
        form: {
          type: '',
          region: '',
          bankId:'',
          contractNo:'',
          money:'',
          entUniId:'',
          entName:''
        },
        businessOptions:Object.freeze(businessOptions),
        input:{},
        fileList:[],
        files:[],
        isReview:false,
        uploadUrl:''
      }
    },
    async activated() {
      await this.getBanks();
      this.init();
    },
    mounted(){
     
    },
    methods: {
      async init(){
        //console.log(' this.$router', this.$route)
        //this.$route.meta.title = 'adw'
        const { id } = this.$route.query;
        const data = await getBusinessById({id});
        if(data.message === 'SUCCESS'){
     
          const { contractNo,entName,bankId,entUniId,money,region,type,createTime } = data.data;
          this.form = {
            contractNo,
            entName,
            bankId,
            entUniId,
            money,
            region,
            type,
            bankid_view:bankId ? this.bankOptions.find(i => i.id === bankId).name : null,
            createtime_view:createTime ? parseTime(new Date(createTime).getTime(), '{y}-{m}-{d} {h}:{i}') : null
          };
        }
        console.log('getBusinessById', data);
        this.uploadUrl = process.env.VUE_APP_BASE_API + '/file/upload?bzId=' + id;
        
      },
      async handleRemove(file, fileList) {
          //console.log(file);
          const id = file.response.data.id;
          //console.log(id);
          const res = await fileDelete({id});
          //console.log('fileDelete',res);
          if(res && res.code === 0){
            return true
          }else{
            this.$message.warning(res.message);
            return false
          }
          
      },
      // 上传成功
      onSuccess(response, file, fileList) {
          // console.log("onSuccess:response", response)
          // console.log("onSuccess:file", file)
          // console.log("onSuccess:fileList", fileList)
          this.files = [];
          //等待所有文件都上传完成，这里注意fileList是所有的文件（包含已上传的）
          if (fileList.every(it => it.status == 'success')) {
              fileList.map(item => {
                  //只push新上传的 （带有response）
                  if(item.response && item.response.code === 0){ //成功的放到真实的files里
                    this.files.push({ name: item.name })
                  }else{
                    this.$message.warning(item.response.message); //失败的 显示的fileList过滤掉
                    this.fileList = fileList.filter(i => i.response.code === 0)
                  }
                  //item.response && this.files.push({ name: item.name, url: item.response.data[0] });
              })
          }
      },
      handeError(err,file){
        this.$message.error('Internal Server Error')
      },
      // handleExceed(files, fileList) {
      //     this.$message.warning(
      //         `当前限制选择 2 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
      //     );
      // },
      async tes(){
        // try{
        //   const res = await test();
        // console.log("onSuccess:tes", res)
        // }catch(err){
  
        // }
        //console.log('formxmfb',this.formxmfb)
            console.log('this.files',this.files)
       
      },
      done(){
        //this.$router.push('/businessList')
        const { id } = this.$route.query;
        this.$router.push({
          path:'businessForm',
          query:{
            action:'check',
            id
          }
        })
      },
      handlePreview(data){
        console.log('handlePreview',data)
      },
      async getBanks(){
        const data = await getBanks();
        this.bankOptions = data.data;
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .detailtable{
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0; 
      border:#e5e5e5 solid 1px;
      margin-bottom: 30px;
      tr{
          width: 100%;
      }
      td{ 
          padding: 8px 10px; 
          text-align: left; 
          line-height: 24px; 
          font-size: 14px;
          color:#434343;  
          border:#e5e5e5 solid 1px;
          font-weight: normal;
          background-color:#fff;
          word-break:break-all;
      }
  }
  </style>
  